import React, { useEffect, useRef } from 'react';
import Phaser from 'phaser';
import config from '../phaser/config';

const PhaserGame = () => {
  const gameRef = useRef(null);

  useEffect(() => {
    if (gameRef.current) {
      // Avoid creating multiple instances if component re-renders
      return;
    }

    // Initialize Phaser game instance
    gameRef.current = new Phaser.Game(config);

    // Cleanup function to destroy the game instance when the component unmounts
    return () => {
      if (gameRef.current) {
        gameRef.current.destroy(true);
        gameRef.current = null;
      }
    };
  }, []); // Empty dependency array ensures this runs only once on mount

  return <div id="phaser-game-container" style={{ width: '800px', height: '600px', margin: 'auto' }} />;
};

export default PhaserGame;